<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/add-style.css" />
</head>

<body class="bg-f">
    <div id="data-loading">
        <div class="loading1"><img src="../images/loading.gif"></div>
    </div>
    <div class="vue">
        <div class="aui-content">
            <div class="address1">
                <div class="hid aui-border-b">
                    <div class="addr-inp1">
                        <input type="text" placeholder="姓名" v-model="address.name">
                    </div>
                    <div class="addr-inp2">
                        <input type="tel" placeholder="电话" v-model="address.phone">
                        <div class="addr-phone" @click="openContacts"></div>
                    </div>
                </div>
                <div class="citys aui-border-b">
                    <div class="citys2"><span>省</span><span>市</span><span>区</span><span>镇</span></div>
                    <div class="citys-add3" @click="selectProvince"><input readonly="readonly" class="citys-add2 aui-border-b" v-model="province" /></div>
                    <div class="citys-add3">
                      <select name="town" class="citys-add2 aui-border-b" v-model="address.town">
                        <option value="">请选择街道</option>
                        <option :value="item" v-for="item in towns">{{item}}</option>
                      </select>
                    </div>
                    <input type="text" placeholder="详细地址" v-model="address.address">
                </div>
            </div>
            <div class="add-hei"></div>
            <div class="aui-tab" id="addr-tab">
                <div class="aui-tab-item aui-active">历史地址</div>
            </div>
            <div class="tab-ct">
                <div class="tab-ct-item" v-if="isLogin">
                    <ul class="aui-list aui-media-list deliv-list deliv-list1">
                        <li class="aui-list-item" v-for="item in myAddress" @click="myAddressConfirmAddress(item)">
                            <a href="javascript:;">
                                <div class="aui-media-list-item-inner">
                                    <div class="aui-list-item-media"></div>
                                    <div class="aui-list-item-inner">
                                        <div class="aui-list-item-text">
                                            <div class="aui-list-item-title aui-ellipsis-1">{{item.name}} {{item.phone}}</div>
                                        </div>
                                        <div class="deliv-text2 aui-margin-t-5">{{item.province}}{{item.city}}{{item.district}}{{item.town}}{{item.address}}</div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="tab-ct-item his-record" v-else>
                    <div class="his-text">
                        <p>当前还未登录哦~</p>
                        <p>登录后可查看并使用历史记录</p>
                    </div>
                    <a href="javascript:;" class="aui-btn aui-btn-info aui-btn-outlined aui-btn-sm u-btn2 aui-margin-t-10" onclick="app.toLogin();">去登录</a>
                </div>
            </div>
        </div>
    </div>
    <!--js-->
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/jquery-1.7.1.min.js"></script>
    <script>
        apiready = function() {
            var addressView = api.require('addressView');
            var statusBarPos = app.statusBar.pos();

            app.request.get('Common/jdJson', function(res) {
                var version = res.data.version,
                    json = res.data.json

                var localVersion = api.getPrefs({
                    sync: true,
                    key: 'localVersion'
                });

                if (localVersion != version) {
                    api.setPrefs({
                        key: 'localVersion',
                        value: version
                    });
                    api.writeFile({
                        path: 'fs://jd.json',
                        data: JSON.stringify(json)
                    }, function(ret, err) {
                        if (!ret.status) {
                            app.error('设置写入缓存失败！' + err.code + err.msg);
                        }
                    });
                }
            })

            vObj = new Vue({
                el: ".vue",
                data: {
                    mapIcon: api.pageParam.mapIcon,
                    addressEventType: api.pageParam.addressEventType,
                    province: "请选择地区",
                    towns: [],
                    address: {
                        name: "",
                        phone: "",
                        province: "",
                        city: "",
                        district: "",
                        town: "",
                        address: "",
                        address_id: 0
                    },
                    pro_id: 360000,
                    city_id: 360100,
                    dir_id: 360102,
                    myAddress: [],
                    isLogin: false
                },
                methods: {
                    selectProvince: function() {
                        addressView.open({
                            file_addr: 'fs://jd.json', //数据源地址
                            selected_color: '#ff0000', //颜色
                            pro_id: vObj.pro_id, //省id
                            city_id: vObj.city_id, //市id
                            dir_id: vObj.dir_id //区id
                        });
                        addressView.show({}, function(ret, err) {
                            if (ret.status) {
                                vObj.address.province = ret.data[0].name;
                                vObj.address.city = ret.data[1].name;
                                vObj.address.district = ret.data[2].name;
                                vObj.address.town = "";

                                vObj.pro_id = ret.data[0].id;
                                vObj.city_id = ret.data[1].id;
                                vObj.dir_id = ret.data[2].id;

                                api.showProgress({
                                    title: '正在处理...',
                                    text: '请稍候...',
                                    modal: false
                                });

                                app.request.get('Common/jdTown?code=' + ret.data[2].id, function(town) {
                                    var towns = [];
                                    for (var i in town.data) {
                                        towns.push(town.data[i])
                                    }
                                    vObj.towns = towns;



                                    api.hideProgress();
                                })
                            }
                        });
                    },
                    selectTown: function() {
                        api.actionSheet({
                            title: '选择街道',
                            cancelTitle: '取消',
                            buttons: vObj.towns
                        }, function(ret, err) {
                            var index = ret.buttonIndex;
                        });
                    },
                    submitAddress: function() {
                        if (this.address.name == '') {
                            app.error("请填写姓名！");
                            return;
                        } else if (this.address.phone == '') {
                            app.error("请填写手机号！");
                            return;
                        } else if (!this.address.province || !this.address.city || !this.address.district) {
                            app.error("请选择地址！");
                            return;
                        } else if (!this.address.town) {
                            app.error("请选择街道！");
                            return;
                        } else if (!this.address.address) {
                            app.error("请填写详细地址");
                            return;
                        } else {
                            this.sendAddressEvent(this.address);
                        }
                    },
                    sendAddressEvent: function(address) {
                        api.sendEvent({
                            name: 'getAddressValue2',
                            extra: {
                                type: vObj.addressEventType,
                                address: address
                            }
                        });
                        api.closeWin();
                    },
                    openContacts: function() {
                        api.openContacts(function(ret, err) {
                            if (ret && ret.status) {
                                vObj.address.name = ret.name;
                                vObj.address.phone = ret.phone.replace(/-/g, '');
                            } else {
                                app.error("取消选择");
                            }
                        });
                    },
                    poiConfirmAddress: function(poi) {
                        this.setAddress(poi);
                    },
                    myAddressConfirmAddress: function(addr) {
                        this.setAddress(addr);
                    },
                    setAddress: function(data) {
                        vObj.address.address_id = data.id;
                        vObj.address.name = data.name;
                        vObj.address.phone = data.phone;
                        vObj.address.province = data.province;
                        vObj.address.city = data.city;
                        vObj.address.district = data.district;
                        vObj.address.town = data.town;
                        vObj.address.address = data.address;
                        this.submitAddress();
                    },
                    getMyAddress: function() {
                        if ($api.getStorage('is_login') == 1) {
                            app.request.post('Client/address', {
                                type: 'province'
                            }, {}, function(res) {
                                if (res.code == 200) {
                                    vObj.isLogin = true;
                                    vObj.myAddress = res.data;
                                } else {
                                    app.error(res.message);
                                }
                            });
                        } else {
                            vObj.isLogin = false;
                        }
                        app.request.finish(vObj);
                    }
                },
                watch: {
                    address: {
                        handler: function(val) {
                            if (!val.province || !val.city || !val.district) {
                                this.province = '请选择地区'
                            } else {
                                this.province = val.province + " " + val.city + " " + val.district
                            }
                        },
                        deep: true
                    }
                }
            })

            api.addEventListener({
                name: 'loginSuccess'
            }, function(ret, err) {
                vObj.getMyAddress();
            });
            vObj.getMyAddress();
        }
    </script>
</body>

</html>
